<template>
	<movable-area class="move-area">
		<movable-view class="move-button" :x="area.x" :y="area.y" direction="all" @change="onChange" damping="30" >
			<button open-type="contact" hover-class="none">
				<view class="img">
				<image src="../static/image/icon_customer.png" style="width: 100%; border-radius: 50%;" mode="widthFix"></image>
				</view>
			</button>
			<button open-type="contact" hover-class="none">
				<view class="txt">
				<view>在线</view>
				<view>客服</view>
				</view>
			</button>
		</movable-view>
	</movable-area>
</template>

<script>
export default {
	data(){
		return {
			area:{
				x:0,
				y:0
			}
		}
	},
	created(){
		uni.getSystemInfo({ //获取屏幕信息 宽度
		   success: (res) => {
				this.area.x = Number(res.windowWidth)
				// this.area.y = Number(res.windowHeight) - 50;
				this.area.y = Number(res.windowHeight)-220;
			}
		});
	},
	methods:{
		onChange(e){
			this.area.y = e.detail.y
			uni.getSystemInfo({ //获取屏幕信息 宽度
			   success: (res) => {
				   if(e.detail.x>Number(res.windowWidth / 2)){
					   this.area.x = Number(res.windowWidth)
				   }else{
					   // this.area.x = 0
					   this.area.x = Number(res.windowWidth)
				   }
				}
			})
		}
	}
}
</script>

<style lang="scss">
	button {
		background: none;
		/* 去除背景样式 */
		border: none;
		/* 去除边框样式 */
		box-shadow: none;
		/* 去除阴影样式 */
		color: inherit;
		/* 文字颜色继承父元素 */
		font: inherit;
		/* 字体样式继承父元素 */
		outline: none;
		/* 去除点击后的轮廓线 */
		padding: 0;
		/* 去除内边距 */
		border-radius: 0;
		transition: background-color 0s;
	}
	
	button::after {
		border: none;
		background-color: none;
	}
	.move-area {
		  position: fixed; 
		  top: 0;
			height: 100%;
			width: 100%;
			z-index:999;
			pointer-events: none; 
			.move-button {
			  pointer-events: auto;
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  width: 160rpx;
			  height: 80rpx;
			  pointer-events: auto;
			  border-radius: 40rpx 0 0 40rpx;
			  background-color: #4c95f4;
			  box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
			  .img{
				  height: 36px;
				  width: 36px;
				  border-radius: 50%;
				  margin-left: 1px;
				  background-color: #fff;
				  display: flex;
				  align-items: center;
				  justify-content: center;
			  }
			  .txt{
				  font-size: 13px;
				  color: #fff;
				  display: flex;
				  flex-direction: column;
				  align-items: center;
				  justify-content: center;
				  margin-right: 3px;
			  }
			}
		}
</style>

